<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    'use strict'
    const obj = {
      name: 'zs',
      get value () {
        console.log(this)
        return this.foo
      }
    }
  
    function createHandler () {
      return {
        get (target, key, receiver) {
          // Proxy 中的 get 的 receiver 是 当前创建的Proxy 对象，或者继承当前Proxy对象的子对象
          if (key === 'foo') {
            return '这是一个很神奇的属性'
          }
          // 代码运行期间获取/设置对象中的成员信息 且会返回布尔值表示成功或失败  失败在严格模式下才有反应
          // Relect.deleteProperty 会返回true/false表示删除成功或失败 而delete没有返回值表示
          // 此处不仅等同于target[key] 还将执行结果返回  最终返回return true||false
          return Reflect.get(target, key, receiver)
          // 此处的recevier也是一个promise对象 设置对象target的get/set方法中的this为代理对象proxy
        },
        set (target, key, value, receiver) {
          return Reflect.set(target, key, value, receiver)
        },
        deleteProperty(target, key) {
          console.log(key)
          // 删除对象属性
          return Reflect.deleteProperty(target, key)
        }
      }
    }
    
    // 给属性设置getter setter
    const proxy = new Proxy(obj, createHandler())
    // 删除时触发deleteProperty
    delete proxy.name
    console.log(proxy.name)
    // console.log(proxy.name)
    // proxy.name = 'xxxx'
    // console.log(proxy.value)
  </script>
</body>
</html>